<template>
    <div>
        <div class="box">
            <a-tabs default-active-key="1" tab-position="left">
                <a-tab-pane key="1" tab="我的主页">
                    <h2>个人信息</h2>
                    <div class="private">
                        <div>
                            <h2>昵称<span style="font-size: 14px;color:#00cf8c;margin-left: 10px">修改</span></h2>
                            <h2>{{userInfo.nickname}}</h2>
                        </div>
                        <div>
                            <h2>手机号<span style="font-size: 14px;color:#00cf8c;margin-left: 10px">修改</span></h2>
                            <h2>{{userInfo.mobile}}</h2>
                        </div>
                        <div>
                            <h2>密码<span style="font-size: 14px;color:#00cf8c;margin-left: 10px">修改</span></h2>
                            <h2><input type="password" style="outline: 0;border: 0" value="userInfo.password"></h2>
                        </div>
                        <div>
                            <div>
                                <img :src="userInfo.avatarUrl" alt="">
                                <br>
                                <a-upload
                                        name="file"
                                        action="/api/pcUser/updata/userAvatar"
                                        @change="handleChange"
                                        :showUploadList='false'
                                >
                                    <a-button> <a-icon type="upload" /> 更改头像 </a-button>
                                </a-upload>
                            </div>
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="2" tab="我的课程">
                    Content of Tab 2
                </a-tab-pane>
                <a-tab-pane key="3" tab="我的订单">
                    Content of Tab 3
                </a-tab-pane>
            </a-tabs>
        </div>
    </div>
</template>

<script>
    import {personalLnformation} from '../api/api'
    export default {
        name: "Mymine",
        data(){
            return {
                userInfo:{},
            }
        },
        created() {
            personalLnformation().then(res=>{
                // console.log(res)
                this.userInfo = res.userInfo
            }).catch(err=>{
                console.log(err)
            })
        },
        methods: {
            handleChange(info) {
                if (info.file.status !== 'uploading') {
                    console.log(info.file, info.fileList);
                }
                if (info.file.status === 'done') {
                    this.$message.success(`${info.file.response.msg} `);
                    this.userInfo = info.file.response.userInfo
                } else if (info.file.status === 'error') {
                    this.$message.error(`${info.file.name} file upload failed.`);
                }
            },
        },
    }
</script>

<style scoped>
    .box {
        min-width: 1200px;
        max-width: 1200px;
        margin: auto;
        margin-top: 20px;
        padding: 20px;
        background-color: white;
    }
    .private {
        padding: 40px;
    }
    .private>div {
        margin-bottom: 20px;
        border-bottom: 1px solid #dddddd;
    }
    .private>div:last-child {
        border-bottom: 0;
    }
    .private>div>h2 {
        margin-bottom: 20px;
    }
    .private img {
        width: 200px;
        height: 200px;
    }
    /deep/.ant-upload {
        margin-top: 10px;
    }

</style>